<template>
<div>
<el-row>
  <el-button type="primary" plain @click="$router.push('/cart')" >我的购物车</el-button>
</el-row>
   <el-table
    :data="shopList"
    style="width: 100%"
    row-class-name="tableRowClassName">
    <el-table-column
      prop="pname"
      label="商品名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="pdate"
      label="上架日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="pdesc"
      label="商品描述">
    </el-table-column>
    <el-table-column
      prop="cid"
      label="商品分类">
    </el-table-column>
     <el-table-column
      prop="price"
      label="商品价格">
    </el-table-column>

     <el-table-column
      prop="pimage"
      label="图片"
      width="180">
       <template slot-scope="scope">
      <el-image
      style="width: 100px; height: 100px"
      :src="scope.row.pimage"
      fit="fit"></el-image>
      </template>
    </el-table-column>

     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="addCart(scope.row)">加入购物车</el-button>
      </template>
    </el-table-column>
  </el-table>
 <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.page"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="params.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
</div>
</template>

<script>
import Vue from 'vue'
export default {
  name:'',
  data () {
    return {
      
      shopList: [],
      params:{
        page:1,
        size:5
      },
       total:10
    }
  },
  created () {

  },
  mounted () {
      this.findAll()
  },
  methods: {
    handleSizeChange(val) {
        this.params.size=val;
        this.findAll()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.params.page=val
        this,this.findAll()
        console.log(`当前页: ${val}`);
      },
    findAll(){
      Vue.axios.post("http://localhost:8088/shop/findAll/"+this.params.page+"/"+this.params.size).then(res=>{
        if(res.data.code==0){
          this.shopList=res.data.data;
          this.total=res.data.total;
        }
      })
      },
      addCart(row){
        Vue.axios.post('http://localhost:8088/cart/addCart/'+row.pid).then(res=>{
          if(res.data.code==0){
             const h = this.$createElement;
                this.$message({
                message: h('p', null, [
                    h('span', null, ''),
                    h('i', { style: 'color: teal' }, res.data.message)
                ])
                });
          }else{
            const h = this.$createElement;
                this.$message({
                message: h('p', null, [
                    h('span', null, ''),
                    h('i', { style: 'color: teal' }, res.data.message)
                ])
                });
                 this.$router.push("/login")
          }
        })
      }
  }
}
</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
